<template>
  <div class="event-handle">
    <Header title="事件处理"/>
    <div class="content">
      <div class="list">
        <a-select default-value="自动报警" style="width: 100%" @change="handleChange">
          <a-select-option :value="item.evenittitle" v-for="item in typeList" :key="item.evenitType">
            {{item.evenittitle}}
          </a-select-option>
        </a-select>
      </div>
      <div class="body">
        <div class="time">
          <ul>
            <li v-for="(item, index) in title" :key="index" :class=" currentIndex === index ? 'on': ''"
                @click="changeIndex(index,item.time)">{{item.name}}
            </li>
          </ul>
        </div>
        <div class="week" v-show="currentIndex === 0">
          <div class="detail" v-for="(item, index) in weekEventList" :key="index">
            <div class="left">
              <ul>
                <li><span>事件编号</span><em>{{item.eventcode}}</em></li>
                <li><span>事件类型</span><em>{{item.devicename}}</em></li>
                <li><span>描述</span><em>{{item.evnettxt}}</em></li>
                <li><span>报修人</span><em>{{item.msguser}}</em></li>
                <li><span>报修时间</span><em>{{item.createtime | dateFormat}}</em></li>
                <li class="more">
                  <router-link
                    :to="{path: '/manage/eventhandle/detail', query: {eventcode: item.eventcode, evnettxt:item.evnettxt}}">
                    详情
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="month" v-show="currentIndex === 1">
          <div class="detail" v-for="(item, index) in monthEventList" :key="index">
            <div class="left">
              <ul>
                <li><span>事件编号</span><em>{{item.eventcode}}</em></li>
                <li><span>事件类型</span><em>{{item.devicename}}</em></li>
                <li><span>描述</span><em>{{item.evnettxt}}</em></li>
                <li><span>报修人</span><em>{{item.msguser}}</em></li>
                <li><span>报修时间</span><em>{{item.createtime | dateFormat}}</em></li>
                <li class="more">
                  <router-link
                    :to="{path: '/manage/eventhandle/detail', query: {eventcode: item.eventcode, evnettxt:item.evnettxt}}">
                    详情
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="threemonth" v-show="currentIndex === 2">
          <div class="detail" v-for="(item, index) in threeMonthEventList" :key="index">
            <div class="left">
              <ul>
                <li><span>事件编号</span><em>{{item.eventcode}}</em></li>
                <li><span>事件类型</span><em>{{item.devicename}}</em></li>
                <li><span>描述</span><em>{{item.evnettxt}}</em></li>
                <li><span>报修人</span><em>{{item.msguser}}</em></li>
                <li><span>报修时间</span><em>{{item.createtime | dateFormat}}</em></li>
                <li class="more">
                  <router-link
                    :to="{path: '/manage/eventhandle/detail', query: {eventcode: item.eventcode, evnettxt:item.evnettxt}}">
                    详情
                  </router-link>
                </li>
              </ul>
            </div>
            <!--            <div class="right">-->
            <!--              <ul>-->
            <!--                <li>{{item.eventcode}}</li>-->
            <!--                <li>{{item.devicename}}</li>-->
            <!--                <li>{{item.evnettxt}}</li>-->
            <!--                <li>{{item.msguser}}</li>-->
            <!--                <li>{{item.createtime | dateFormat}}</li>-->
            <!--                <li>-->
            <!--                  <router-link :to="{path: '/manage/eventhandle/detail', query: {eventcode: item.eventcode, evnettxt:item.evnettxt}}">详情-->
            <!--                  </router-link>-->
            <!--                </li>-->
            <!--              </ul>-->
            <!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from './../../../components/Header/Header'
import { getEventType } from '../../../api'

export default {
  name: 'EventHandle',
  data () {
    return {
      title: [
        {
          name: '最近一周',
          id: 1,
          time: ''
        },
        {
          name: '最近一月',
          id: 1,
          time: ''
        },
        {
          name: '最近三月',
          id: 1,
          time: ''
        }
      ],
      currentIndex: 0,
      // 事件信息列表
      eventList: [],
      // 事件编号
      eventcode: '',
      weekEventList: [],
      monthEventList: [],
      threeMonthEventList: [],
      // 事件类型数组
      typeList: [],
      evenitType: ''
    }
  },
  components: {
    Header
  },
  mounted () {
    // 获取事件类型下拉列表
    this.getEventTypeData()
    this.getEventInfo()
  },
  methods: {
    // 当下拉列表发生改变时触发
    async changeIndex (index) {
      this.currentIndex = index
      console.log(index)
      if (index === 0) {
        this.getEventInfo()
      } else if (index === 1) {
        const result = await this.$http.post('/api/fictitious/POSTEventsimpleList', {
          evenitType: this.evenitType,
          evenitdate: 1 // 此时代表着7天的数据
        })
        // console.log(result)
        this.monthEventList = result.data.data
      } else if (index === 2) {
        const result = await this.$http.post('/api/fictitious/POSTEventsimpleList', {
          evenitType: this.evenitType,
          evenitdate: 2 // 此时代表着7天的数据
        })
        // console.log(result)
        this.threeMonthEventList = result.data.data
      }
    },
    handleChange (val, index) {
      // console.log(val)
      // console.log(index.data.key)
      this.evenitType = index.data.key
      this.changeIndex(index.data.key)
    },
    // 获取事件类型下拉列表
    async getEventTypeData () {
      const result = await getEventType()
      console.log(result)
      this.typeList = result.data
      console.log(this.typeList)
    },
    // 获取事件信息
    async getEventInfo () {
      const result = await this.$http.post('/api/fictitious/POSTEventsimpleList', {
        evenitType: 0,
        evenitdate: 0 // 此时代表着7天的数据
      })
      console.log(result)
      this.weekEventList = result.data.data
    }
  }
}
</script>

<style scoped lang="less">
  .event-handle {
    background-color: #fff;
    height: 100%;
    width: 100%;
    letter-spacing: 1px;

    .content {
      width: 344px;
      margin: 0 auto;

      .list {
        margin-bottom: 18px;
        margin-top: 15px;
      }

      .body {
        overflow: hidden;

        .time {
          height: 30px;

          ul {
            li {
              float: left;
              width: 95px;
              height: 30px;
              background-color: #f9f9f9;
              line-height: 30px;
              text-align: center;
              margin-right: 28px;
              font-size: 16px;
              color: #aaa9a9;
              border-radius: 20px;

              &:nth-child(3) {
                margin-right: 0;
              }

              &.on {
                border: 1px solid #a1c2f8;
                color: #4485f4;
              }
            }
          }
        }

        .detail {
          margin-top: 25px;
          overflow: hidden;
          border-bottom: 1px solid #e5e5e5;

          &:last-child {
            border-bottom: 0;
          }

          .left {
            /*float: left;*/
            /*width: 22%;*/

            .more {
              justify-content: flex-end;
            }

            ul {
              li {
                display: flex;
                justify-content: space-between;
                font-size: 15px;
                color: #b5b5b5;
                margin-bottom: 13px;

                span {
                  flex-shrink: 0;
                  width: 34%;
                }

                em {
                  color: #4c4c4c;
                }
              }
            }
          }

          .right {
            float: right;
            width: 78%;

            ul {
              li {
                font-size: 15px;
                color: #4c4c4c;
                margin-bottom: 13px;
                text-align: right;

                &:last-child {
                  margin-top: 18px;
                  color: #4485f4;
                  margin-bottom: 23px;
                }

                &.evnettxt {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
